<!-- 权限分配 -->
<template>
  <div class="menu_auth">
    <el-row style="margin-bottom: 1rem;">
      <el-col>
        用户组：
        <el-tag v-for="(o,i) in list" :class="{ active: form.auth_id === o.auth_id }" :key="i"
          :disable-transitions="false" @click="form = o;" @close="del_auth(o)"
          :closable="o.name !== '管理员' && o.name !== '游客'">{{o.name}}</el-tag>
        <el-input v-model="name" ref="form" style="width: 150px;" placeholder="身份名">
        </el-input>
        <el-button type="primary" @click="add_user_group()">添加</el-button>
        <el-button type="primary" @click="save_auth()">保存权限</el-button>
      </el-col>
    </el-row>

    <el-row>
      <el-col :span="24">
        <el-table :data="form.auth" style="width: 100%" :span-method="objectSpanMethod">
          <el-table-column prop="mod_name" label="模块" width="110">
          </el-table-column>
          <el-table-column label="页面">
            <el-table-column prop="path" label="路由" width="130">
              <template slot-scope="scope">
                {{ page_vm[scope.row.path] }} <span>{{ scope.row.path }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="page_title" label="标题" width="130">
              <template slot-scope="scope">
                <el-input v-model="scope.row.page_title" size="mini" />
              </template>
            </el-table-column>
          </el-table-column>
          <el-table-column label="权限">
            <el-table-column prop="all" label="全部">
              <template slot-scope="scope">
                <el-checkbox v-model="scope.row.all" @change="select_all(scope.row)">全选</el-checkbox>
                <el-checkbox v-model="scope.row.get">查</el-checkbox>
                <el-checkbox v-model="scope.row.add">增</el-checkbox>
                <el-checkbox v-model="scope.row.del">删</el-checkbox>
                <el-checkbox v-model="scope.row.set">改</el-checkbox>
                <el-checkbox v-for="(o, k) in scope.row.option" :key="k" v-model="scope.row.option[k]">
                  {{ option_name[k] }}</el-checkbox>
                <el-checkbox v-if="scope.row.table_nav_name" v-model="scope.row.table_nav">
                  {{ scope.row.table_nav_name }}</el-checkbox>
              </template>
            </el-table-column>
            <el-table-column prop="filed_add" label="增" width="100">
              <template slot-scope="scope">
                <div v-if="scope.row.path === 'table' || scope.row.path === 'view'"
                  @click="show_select_box(scope.row.table_id, scope.row , 'filed_add')">
                  {{ arr_to_str(scope.row.filed_add) || "*" }}</div>
              </template>
            </el-table-column>
            <el-table-column prop="filed_set" label="改" width="100">
              <template slot-scope="scope">
                <div v-if="scope.row.path === 'table' || scope.row.path === 'view'"
                  @click="show_select_box(scope.row.table_id, scope.row , 'filed_set')">
                  {{ arr_to_str(scope.row.filed_set) || "*" }}</div>
              </template>
            </el-table-column>
            <el-table-column prop="filed_get" label="查" width="100">
              <template slot-scope="scope">
                <div @click="show_select_box(scope.row.table_id, scope.row, 'filed_get')">
                  {{ arr_to_str(scope.row.filed_get) || "*" }}</div>
              </template>
            </el-table-column>
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24">
        <el-button class="btn-full" type="primary" @click="save_auth()">保存权限</el-button>
      </el-col>
    </el-row>
    <el-dialog title="删除用户组" :visible.sync="show" max-width="100%">
      <span>是否删除</span><strong> {{ query_del.name }} </strong><span>?</span>
      <div slot="footer" class="dialog-footer">
        <el-button @click="show = false">取 消</el-button>
        <el-button type="primary" @click="show = false; del({  auth_id: query_del.auth_id } )">确 定</el-button>
      </div>
    </el-dialog>

    <el-dialog class="field_action" title="允许字段" :visible.sync="show_select">
      <el-transfer v-model="obj_field" :data="list_field_new" :titles="['不可见', '可见']"></el-transfer>
      <div slot="footer" class="dialog-footer">
        <el-button @click="show_select = false">取 消</el-button>
        <el-button type="primary" @click="show_select = false; jobj[key] = obj_field;">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
  import mixin from '../mixins/component.js';

  export default {
    mixins: [mixin],
    props: {
      order_id: {
        type: Number,
        default: 0
      }
    },
    data() {
      return {
        url_get_list: "~/apis/dev/order_auth?",
        url_add: "~/apis/dev/order_auth?method=add",
        url_set: "~/apis/dev/order_auth?method=set",
        url_del: "~/apis/dev/order_auth?method=del",
        query: {
          order_id: this.order_id
        },
        "option_name": {
          "examine": "审核",
          "pay": "支付",
          "can_show_comment": "查看评论",
          "can_comment": "评论",
          "can_show_score": "查看评分",
          "can_collect": "收藏",
          "can_score": "评分",
          "export_db": "导出",
          "import_db": "导入",
          "print": "打印"
        },
        "page_vm": {
          "table": "后台列表",
          "list": "前台列表",
          "view": "后台详情",
          "details": "前台详情"
        },
        name: "",
        now_obj: {
          name: "",
          power: {},
          fields: {}
        },
        all_btn: {},
        arr: [],
        index: 0,
        query_del: {
          auth_id: 0
        },
        form: {
          auth: []
        },
        list_field: [],
        table_id: 0,
        obj_field: [],
        spanArr: [],
        position: 0,
        show_select: false,
        jobj: {}
      }
    },
    methods: {
      /**
       * 事件 - 获取权限列表后
       * @param {Object} json 请求到的结果
       */
      get_list_after(json) {
        var res = json.result;
        if (res && res.list.length) {
          this.form = res.list[res.list.length - 1];
          this.get_all_field(res.ids.join("|"));
          this.rowspan();
        }
      },
      /**
       * 是否已全选
       * @param {Object} o 用来判断的对象
       */
      is_all(o) {
        if (o.table_nav_name && !o.table_nav) {
          return false
        }
        var bl = false;
        if (o.add && o.del && o.set && o.get) {
          var option = o.option;
          bl = true;
          for (var k in option) {
            if (!option[k]) {
              bl = false;
              break;
            }
          }
        }
        return bl;
      },
      /**
       * 选择全部
       * @param {Object} o 操作的对象
       */
      select_all(o) {
        var bl = o.all;

        o.add = bl;
        o.del = bl;
        o.set = bl;
        o.get = bl;
        o.table_nav = bl;

        var option = o.option;
        for (var k in option) {
          option[k] = bl;
        }
      },
      /**
       * 行
       */
      rowspan() {
        // 在data里面定义
        this.spanArr = []
        // 在data里面定义
        this.position = 0;
        var auth = this.form.auth;
        auth.forEach((item, index) => {
          if (index === 0) {
            this.spanArr.push(1)
            this.position = 0
            // 设置序号
            item.sequence = index + 1
          } else {
            if (auth[index].mod_name === auth[index - 1].mod_name) {
              // 连续有几行项目名名称相同
              this.spanArr[this.position] += 1
              // 名称相同后往数组里面加一项
              this.spanArr.push(0)
            } else {
              this.spanArr.push(1)
              this.position = index
              // 当项目名称不同时，将当前序号设置为前一个序号+1
              auth[index].sequence = auth[index - 1].sequence + 1
            }
          }
        })
      },
      /**
       * element合并列
       */
      objectSpanMethod({
        row,
        column,
        rowIndex,
        columnIndex
      }) {
        if (columnIndex === 0) {
          // this.spanArr这个数组里面存的是table里面连续的有几条数据相同
          // 例如:[1,1,2,0,2,0]
          //  1  代表的没有连续的相同的
          //  2  代表连续的两个相同
          //  0  代表是和上一条内容相同
          const _row = this.spanArr[rowIndex]
          const _col = _row > 0 ? 1 : 0
          /* console.log('ppp')
          console.log(_row)
          console.log(_col) */
          return {
            rowspan: _row,
            colspan: _col
          }
        }
      },
      /**
       * 保存授权
       */
      save_auth() {
        if (this.name) {
          this.form.name = this.name;
          this.name = "";
        }
        this.set(this.form, {
          auth_id: this.form.auth_id
        });
      },
      /**
       * 添加用户组
       */
      add_user_group() {
        this.add({
          name: this.name,
          order_id: this.order_id
        });
        this.name = "";
        this.get_list();
      },
      /**
       * 事件 - 获取权限列表前，用于增加请求参数
       */
      get_list_before(param) {
        param.orderby = "`auth_id` asc";
        return param;
      },
      /**
       * 删除授权
       * @param {Object} o 被删除的授权对象
       */
      del_auth(o) {
        this.query_del = {
          auth_id: o.auth_id,
          name: o.name
        }
        this.show = true;
      },
      /**
       * 事件 - 授权删除之后，表格列表的数据也要删除
       * @param {Object} json
       */
      del_after(json) {
        var lt = this.list;
        for (var i = 0; i < lt.length; i++) {
          var o = lt[i];
          if (o.name === this.query_del.name) {
            lt.splice(i, 1);
            break;
          }
        }
      },
      /**
       * 数组转字符串，用于显示授权字段
       * @param {Object} arr
       */
      arr_to_str(arr) {
        if (arr) {
          return arr.join(' ')
        } else {
          return ""
        }
      },
      get_all_field(table_id) {
        var _this = this;
        this.$get("~/apis/dev/order_field?size=0&field=name,title,table_id&table_id=" + table_id, null, function(json) {
          if (json.result) {
            _this.list_field = json.result.list;
          }
        });
      },
      show_select_box(table_id, obj, key) {
        this.jobj = obj;
        this.obj_field = obj[key];
        this.key = key;
        this.table_id = table_id;
        this.show_select = true;
      }
    },
    computed: {
      list_field_new() {
        var list = this.list_field;
        var lt = [];
        for (var i = 0; i < list.length; i++) {
          var o = list[i];
          if (o.table_id === this.table_id) {
            if (!lt.getObj({
                key: o.title
              })) {
              lt.push({
                key: o.title,
                label: o.title,
                disabled: false
              });
            }
          }
        }
        return lt;
      }
    }
  }
</script>

<style scoped="scoped">
  .active {
    border-color: #409EFF;
  }

  .el-tag {
    margin-right: .5rem;
  }

  .btn-full {
    display: block;
    width: 100%;
    max-width: 26.125rem;
    margin: 1rem auto;
  }
</style>
